<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="../js/codemirror/codemirror.css">
<script src="../js/codemirror/codemirror.js"></script>
<script src="../js/codemirror/show-hint.js"></script>
<script src="../js/codemirror/xml-hint.js"></script>
<script src="../js/codemirror/xml.js"></script>

</head>
<body>
	<textarea id="code" name="code">
</textarea>

	<script>
		var dummy = {
			attrs : {
				color : [ "red", "green", "blue", "purple", "white", "black",
						"yellow" ],
				size : [ "large", "medium", "small" ],
				description : null
			},
			children : []
		};

		var tags = {
			"!top" : [ "top" ],
			"!attrs" : {
				id : null,
				class : [ "A", "B", "C" ]
			},
			top : {
				attrs : {
					lang : [ "en", "de", "fr", "nl" ],
					freeform : null
				},
				children : [ "animal", "plant" ]
			},
			animal : {
				attrs : {
					name : null,
					isduck : [ "yes", "no" ]
				},
				children : [ "wings", "feet", "body", "head", "tail" ]
			},
			plant : {
				attrs : {
					name : null
				},
				children : [ "leaves", "stem", "flowers" ]
			},
			wings : dummy,
			feet : dummy,
			body : dummy,
			head : dummy,
			tail : dummy,
			leaves : dummy,
			stem : dummy,
			flowers : dummy
		};

		function completeAfter(cm, pred) {
			var cur = cm.getCursor();
			if (!pred || pred())
				setTimeout(function() {
					if (!cm.state.completionActive)
						cm.showHint({
							completeSingle : false
						});
				}, 100);
			return CodeMirror.Pass;
		}

		function completeIfAfterLt(cm) {
			return completeAfter(
					cm,
					function() {
						var cur = cm.getCursor();
						return cm.getRange(
								CodeMirror.Pos(cur.line, cur.ch - 1), cur) == "<";
					});
		}

		function completeIfInTag(cm) {
			return completeAfter(
					cm,
					function() {
						var tok = cm.getTokenAt(cm.getCursor());
						if (tok.type == "string"
								&& (!/['"]/.test(tok.string
										.charAt(tok.string.length - 1)) || tok.string.length == 1))
							return false;
						var inner = CodeMirror.innerMode(cm.getMode(),
								tok.state).state;
						return inner.tagName;
					});
		}

		var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
			mode : "xml",
			lineNumbers : true,
	        extraKeys: {
	            "'<'": completeAfter,
	            "'/'": completeIfAfterLt,
	            "' '": completeIfInTag,
	            "'='": completeIfInTag,
	            "Ctrl-Space": "autocomplete"
	          },
	          hintOptions: {schemaInfo: tags}
		});
		editor.setSize("98%", "700px");
		
		// 获取值
		// editor.getValue();
	</script>
</body>
</html>